import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Dimensions,
  Alert,
  Image,
} from 'react-native';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import IoniconsIcon from 'react-native-vector-icons/Ionicons';
import MineCell from '../cell/Cell';
const { width } = Dimensions.get('window');
export default class Mine extends Component {
  static navigationOptions = {
    header: null,
  };
  handleCell = (title) => {
    Alert.alert(title);
  }
  renderBottomNavigatorItem = () => {
    const bottomNavigatorArr = [{
      number: 120,
      title: '小陈优惠券',
    }, {
      number: 12,
      title: '评论',
    }, {
      number: 50,
      title: '收藏',
    }];
    return bottomNavigatorArr.map((item, index) => {
      return (
        <TouchableOpacity
          key={index.toString()}
          activeOpacity={.5}
          style={index === 1 ? styles.midBottomNavigatorItem : styles.bottomNavigatorItem}
        >
          <Text style={{ color: '#fff', fontSize: 12, marginBottom: 5 }}>{item.number}</Text>
          <Text style={{ color: '#fff', fontSize: 12 }}>{item.title}</Text>
        </TouchableOpacity>
      )
    })
  }

  renderOrder = () => {
    const orderCellArr = [{
      title: '我的订单',
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(238, 167, 60)',
          marginRight: 10,
        }}
        >
          <AntDesignIcon name="star" size={18} color="#fff" />
        </View>
      ),
      rightContent: (
        <View style={styles.rightContentStyle}>
          <Text style={{ color: '#bbb' }}>查看全部订单</Text>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }];
    return orderCellArr.map(item => {
      const { rightContent, ...rest } = item;
      return (
        <TouchableOpacity
          activeOpacity={0.5}
          onPress={this.handleCell.bind(this, item.title)}
        >
          <MineCell
            {...rest}
            rightContent={rightContent}
          />
        </TouchableOpacity>
      )
    });
  }

  renderOrderType = () => {
    const orderTypeArr = [{
      iconName: 'ios-wallet',
      title: '待付款',
    }, {
      iconName: 'ios-pause',
      title: '待使用',
    }, {
      iconName: 'logo-markdown',
      title: '待评价',
    }, {
      iconName: 'ios-code-working',
      title: '退款/售后',
    }];
    return orderTypeArr.map((item, index) => {
      return (
        <TouchableOpacity
          key={index.toString()}
          activeOpacity={.5}
          style={styles.orderTypeContentItem}
        >
          <IoniconsIcon size={24} color="#bbb" name={item.iconName} />
          <Text style={{ color: '#bbb', fontSize: 12 }}>{item.title}</Text>
        </TouchableOpacity>
      );
    })
  }

  renderMoreCell = () => {
    const moreCellArr = [{
      title: '小陈钱包',
      gapTop: 10,
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(110, 152, 223)',
          marginRight: 10,
        }}
        >
          <AntDesignIcon name="wallet" size={18} color="#fff" />
        </View>
      ),
      rightContent: (
        <View style={styles.rightContentStyle}>
          <Text style={{ color: '#bbb' }}>账户余额：¥100</Text>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }, {
      title: '抵用券',
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(220, 122, 105)',
          marginRight: 10,
        }}
        >
          <FontAwesomeIcon name="thumbs-up" size={18} color="#fff" />
        </View>
      ),
      rightContent: (
        <View style={styles.rightContentStyle}>
          <Text style={{ color: '#bbb' }}>0</Text>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }, {
      title: '积分商城',
      gapTop: 10,
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(110, 152, 223)',
          marginRight: 10,
        }}
        >
          <AntDesignIcon name="qrcode" size={18} color="#fff" />
        </View>
      )
    }, {
      title: '今日推荐',
      gapTop: 10,
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(238, 167, 60)',
          marginRight: 10,
        }}
        >
          <FontAwesomeIcon name="user" size={18} color="#fff" />
        </View>
      ),
      rightContent: (
        <View style={styles.rightContentStyle}>
          <View style={styles.recommentRightContent}>
            <Text style={{ color: '#fff' }}>New</Text>
          </View>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }, {
      title: '我要合作',
      gapTop: 10,
      leftContent: (
        <View style={{
          height: 30,
          width: 30,
          borderRadius: 30,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgb(103, 168, 128)',
          marginRight: 10,
        }}
        >
          <FontAwesomeIcon name="google-wallet" size={18} color="#fff" />
        </View>
      ),
      rightContent: (
        <View style={styles.rightContentStyle}>
          <Text style={{ color: '#bbb' }}>轻松开店，招财进宝</Text>
          <AntDesignIcon size={18} name="right" color="#bbb" />
        </View>
      )
    }];
    return moreCellArr.map((item, index) => {
      const { rightContent, ...rest } = item;
      return (
        <TouchableOpacity
          key={index.toString()}
          activeOpacity={0.5}
          onPress={this.handleCell.bind(this, item.title)}
        >
          <MineCell
            {...rest}
            rightContent={rightContent || <AntDesignIcon size={18} name="right" color="#bbb" />}
          />
        </TouchableOpacity>
      )
    });
  }
  render() {
    return (
      <View style={styles.minePage}>
        <View style={styles.navigatorTitle}>
          <View style={styles.leftNavigatorContent}>
            <Image style={styles.userImg} source={{ uri: 'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-native/2.jpg' }} />
            <Text style={{ color: '#fff' }}>小陈电商</Text>
          </View>
          <AntDesignIcon size={18} name="right" color="#fff" />
          <View style={styles.bottomNavigatorContent}>
            {this.renderBottomNavigatorItem()}
          </View>
        </View>
        <View style={{ width }}>
          {this.renderOrder()}
          <View style={styles.orderTypeContent}>
            {this.renderOrderType()}
          </View>
        </View>
        <ScrollView contentContainerStyle={styles.moreScrollView}>
          {this.renderMoreCell()}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  minePage: {
    flex: 1,
    alignItems: 'center',
  },
  navigatorTitle: {
    position: 'relative',
    padding: 10,
    paddingTop: 50,
    paddingBottom: 50,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'rgb(106, 146, 266)',
  },
  leftNavigatorContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  userImg: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginRight: 10
  },
  bottomNavigatorContent: {
    width: width,
    position: 'absolute',
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, .2)',
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
  },
  bottomNavigatorItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  midBottomNavigatorItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderLeftWidth: 1,
    borderLeftColor: '#e8e8e8',
    borderRightWidth: 1,
    borderRightColor: '#e8e8e8',
  },
  orderTypeContent: {
    flexDirection: 'row'
  },
  orderTypeContentItem: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 10,
    paddingBottom: 10
  },
  moreScrollView: {
    backgroundColor: '#e8e8e8',
    width,
    flex: 1,
  },
  rightContentStyle: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  recommentRightContent: {
    paddingLeft: 5,
    paddingRight: 5,
    backgroundColor: 'red',
    borderRadius: 20
  }
})